/*
  学习目标：Redirect 重定向 - 配个 exact 使用
  from 代表需要重定向的路径， to代表实际去到的路径
  <Redirect from="/" to="/home" exact></Redirect>
*/
import React from 'react';
import {
  BrowserRouter as Router,
  Route,
  Switch,
  Link,
  Redirect,
} from 'react-router-dom';
import './index.css';

export default class App extends React.Component {
  render() {
    return (
      <div>
        <Router>
          <Link to="/home">首页</Link>
          <br />
          <Link to="/my">我的音乐</Link>
          <br />
          <Link to="/friend">发现</Link>
          <br />
          <Switch>
            <Redirect from="/" to="/home" exact></Redirect>
            <Route path="/home" component={Home} exact></Route>
            <Route path="/my" component={My}></Route>
            <Route path="/friend" component={Friend}></Route>

            {/* 404 一定是 通配，并且要写在最后面 */}
            <Route component={NotFount}></Route>
          </Switch>
        </Router>
      </div>
    );
  }
}

function NotFount() {
  return <div>我是NotFount组件-路径都匹配不上，就显示404吧</div>;
}
function Home() {
  return <div>我是Home组件</div>;
}
function My() {
  return <div>我是My组件</div>;
}
function Friend() {
  return <div>我是Friend组件</div>;
}
